<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>内容管理系统-首页</title>
</head>
<style type="text/css">
	*{margin:0;padding:0;}
	.header{
		height:50px;
	}
	.heart{
		width:1200px;
		height:50px;
		margin:0 auto;
	}
	.logo{
		margin-top:5px;
		float:left;
	}
	.category{
		height:50px;
		float:right;
	}
	.category ul li{
		height:30px;
		margin:10px;
		float:left;
		margin-top:14px;
		list-style:none;
		background-color:white;
	}
	.category ul li a{
		position: relative;
		color: #000;
		text-decoration: none;
	}
	.category ul li a:hover{
		color: #3dacec;
	}
	.category ul li a:before {
		content: "";	
		position: absolute;	
		width: 100%;	
		height: 2px;	
		bottom: -16px;	
		left: 0;	
		background-color: #3dacec;	
		visibility: hidden;	
		-webkit-transform: scaleX(0);	
		-o-transform: scaleX(0);	
		transform: scaleX(0);	
		-webkit-transition: all 0.1s ease-in-out 0s;	
		-o-transition: all 0.1s ease-in-out 0s;	
		transition: all 0.1s ease-in-out 0s;	
	}
	.category ul li a:hover:before {	
		visibility: visible;	
		-webkit-transform: scaleX(1);	
		-o-transform: scaleX(1);	
		transform: scaleX(1);	
	}
	.content{
		height:1300px;
		box-shadow:0px 0px 5px 0px #aaa inset;
		background-color:#f1f1f1;
	}
	.banner{
		padding-top:10px;
	}
	.content_left{
		width:850px;
		height:870px;
		margin-top:10px;
		background-color:white;
		float:left;
		padding-top:20px;
		border-radius:8px;
	}
	
	.content_left_a{
		width:800px;
		margin:0 auto;
	}
	.content_left_a a{
		position: relative;
		color: #000;
		text-decoration: none;
	}
	.content_left_a a:hover{
		color:#3dacec;
	}
	.content_left_a a:link ,a:visited{
		color:black;
		text-decoration: none;
	}
	.content_left_a a:before {
		content: "";	
		position: absolute;	
		width: 100%;	
		height: 2px;	
		bottom: -2px;	
		left: 0;	
		background-color: #3dacec;	
		visibility: hidden;	
		-webkit-transform: scaleX(0);	
		-o-transform: scaleX(0);	
		transform: scaleX(0);	
		-webkit-transition: all 0.15s ease-in-out 0s;	
		-o-transition: all 0.15s ease-in-out 0s;	
		transition: all 0.15s ease-in-out 0s;	
	}
	.content_left_a a:hover:before {	
		visibility: visible;	
		-webkit-transform: scaleX(1);	
		-o-transform: scaleX(1);	
		transform: scaleX(1);	
	}
	.content_left_a h2{
		color:#555555;
	}
	.content_left_a p {
		margin:1px 0;
		color:#9a9a8f;
		float="right"
	}
	.content_left_a span {
		color:#555555;
		float:right;
	}
	.content_left_a hr {
		margin: 9px 0;
		border:0.3px solid #eeeeee;
	}
	.content_left_a img {
		border-radius:8px;
		box-shadow:5px 5px 6px 0px #ececec ;
	}
	.tb_one{
		width:290px;
		height:30px;
		<!-- 设置只有内边框-->
		border-collapse: collapse;
		border:0 solid #d1cbcb;
		cellpadding:20px;
		margin:0 auto;
		margin-top:20px;
		margin-bottom:40px;
		font-weight:bold;
	}
	.tb_one td{
		text-align:center;
		border:1px solid #d1cbcb;
		color:#948b8b;
		font-size:10px;
	}
	.tb_one td:hover{
		background: #17B592;
		color: white;
	}
	.tb_one  a:hover{
		background: #17B592;
		text-decoration:none;
		color: white;
		font-size:15px;
	}
	.tb_one a:link,a:visited{
		text-decoration:none;
		
	}
	
	.content_right{
		width:325px;
		height:180px;
		margin-top:10px;
		background-color:white;
		float:right;
	}
	.tb_two{
		width:325px;
		height:180px;
		border-collapse:collapse;
	}
	.tb_two tr th{
		border-top:none;
		text-align:left;
		padding-left:10px;
		box-shadow:0px -5px 6px 0px #ececec inset;
		background-color:#fbfbfb;
	}
	.tb_two td{
		width:50%;
		text-align:center;
		border-bottom:2px solid #fbfbfb;
		font-size:10px;
		color:#9a9a8f;
	}
	.td_1{border-right:2px solid #fbfbfb;}
	.tb_three{
		width:325px;
		
		margin-top:10px;
		border-collapse:collapse;
		background-color:white;
		table-layout:fixed;
		cellspacing:0;
		cellpadding:0;
		border-radius:8px;
	}
	.tb_three tr th{
		width:100%;
		height:50px;
		border-top:none;
		text-align:left;
		padding-left:10px;
		box-shadow:0px -5px 6px 0px #ececec inset;
		background-color:#fbfbfb;
	}
	.tb_three tr{
		height:-5px;
	}
	.tb_three td{
		text-align:left;
		padding-left:-10px;
		font-size:13px;
		color:#9a9a8f;
		padding:10px 0;
		
		white-space: nowrap; 
		text-overflow: ellipsis; 
		overflow: hidden;
	}
	.tb_three span{
		color:#9a9a8f;
		font-size:5px;
	}
	.tb_three span a:hover{
		color:red;
		text-decoration:none;
	}
	.tb_three span a:link,a:visited{
		color:#9a9a8f;
		text-decoration:none;
	}
	
	.tb_four{
		width:325px;
		height:300px;
		margin-top:10px;
		border-collapse:collapse;
		background-color:white;
		table-layout:fixed;
		cellspacing:0;
		cellpadding:0;
		border-radius:8px;
	}
	.tb_four tr th{
		width:100%;
		height:50px;
		border-top:none;
		text-align:left;
		padding-left:10px;
		box-shadow:0px -5px 6px 0px #ececec inset;
		background-color:#fbfbfb;
	}
	.tb_four td{
		text-align:left;
		padding-left:10px;
		font-size:15px;
		color:#9a9a8f;
		
		white-space: nowrap; 
		text-overflow: ellipsis; 
		overflow: hidden;
	}
	.tb_four span{
		color:#fe7d00;
		
	}
	.tb_four tr td span{
		color:#fe7d00;
		font-weight:bold;
		font-size:18px;
	}
	.footer{
		height:40px;
		text-align:center;
		line-height:40px;
		color:#9a9a8f;
		font-size:5px;
	}
</style>
<body>
	<div class="header">
	<!--  页面版心-->
		<div class="heart">
		<!-- logo位置 -->
			<div class="logo" >
				<img src="./Photos/logo.png" width="50%">
			</div>
			<!-- 标题栏位置 -->
			<div class="category">
				<ul>
					<li><a href="shouye.php">首页</a></li>
					<li><a href="#">生活</a></li>
					<li><a href="#">资讯</a></li>
					<li><a href="code.php">编程</a></li>
					<li><a href="#">互联网</a></li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="content">
		<div class="heart">
		<!-- 轮播图 -->
			<div class="banner">
				<img src="./Photos/banner.jpg"/>
			</div>
			<!--页面左边  -->
			<div class="content_left">
				<div class="content_left_a">
						
					<?php for($i=$start_index;$i<=$end_index;$i++){
					?>
							<h2><a href="article.php?page=<?=6-$i?>"><?=$data[$i][2]?></a></h2>
							<p>&nbsp;&nbsp;<?=$data[$i][10]?></p>
							<img src="<?=$data[$i][4]?>" />
							<p >作者:<?=$data[$i][3]?> | 发表于:<?=$data[$i][7]?><span >查看原文&gt;&gt;</span></p>
							<hr >			
					<?php 
					 }?>
		
						 <table class="tb_one">
								<td><a href="?page=1">首页</a></td>
								<td><a href="?page=<?=$pre_page?>">上一页</a></td>
								<td><a href="?page=1">1</a></td>
								<td><a href="?page=2">2</a></td>
								<td><a href="?page=<?=$next_page?>">下一页</a></td>
								<td><a href="?page=<?=$total_page?>">尾页</a></td>
						 </table>
										
				</div>
			</div>
			<!--页面右边  -->
			<div class="content_right">
				<table class="tb_two">
					<tr>
						<th colspan="2">内容栏目</th>
					</tr>
					<tr >
						<td class="td_1">生活</td>
						<td>资讯</td>
					</tr>
					<tr>
						<td class="td_1">编程</td>
						<td>互联网</td>
					</tr>
					<tr>
						<td class="td_1">科技</td>
						<td ></td>
					</tr>
				</table>
				<table class="tb_three">
					<tr>
						<th >浏览历史<span>&nbsp;&nbsp;<a href="?action=clear">( 清 空 )</a></span></th>
					</tr>
					<?php foreach ($cookie_arr as $k => $v){
					?>	
					<tr >
							<td><img src="./Photos/trangle.png" width=5%>&nbsp;&nbsp;<?= $data[$v][2]?></td>	
					</tr>
					<?php 
					 }?>
				
				</table>
				<table class="tb_four">
					<tr>
						<th ><span><em>TOP10</em></span>&nbsp;&nbsp;热门文章</th>
					</tr>
					<?php for($i=$start_index;$i<=2;$i++){
					?>	
					<tr >
							<td><span><em><?=$data[$i][0]?></em></span>&nbsp;&nbsp;<?=$data[$i][2]?></td>	
					</tr>
					<?php 
					 }?>
					<?php for($i=$start_index+3;$i<=5;$i++){
					?>	
					<tr >
							<td><em><?=$data[$i][0]?></em>&nbsp;&nbsp;<?=$data[$i][2]?></td>	
					</tr>
					<?php 
					 }?>
				</table>
			</div>
		</div>
	</div>
	<div class="footer">
		<p>©2022 gaozhen.top PHP内容管理系统&nbsp;&nbsp;本系统仅供参考和学习</p>

	</div>
</body>

</html>
